<template>
  <div class="w bgcolor">
    <div class="header">
      <div class="search w">
        <div class="right">
          <div class="search-bar relative">
            <div class="search-bar-form">
              <div>
                <input
                  type="text"
                  class="text"
                  maxlength="13"
                  v-model="searchKey"
                  autocomplete="off"
                  @focus="focus"
                  @keyup.enter="searchDate()"
                />
                <i class="iconfont button" @click="searchDate()">&#xe6e1;</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pro-cate-area hide" style="display: block">
      <div class="pro-cate-attr clearfix">
        <div class="p-title">分类：</div>
        <div class="p-values">
          <div class="p-expand" :class="{ p_single: toggleCat }">
            <ul class="clearfix">
              <li
                v-for="(brand, index) in brands"
                :key="index"
                :class="{ selected: isselect[index] }"
              >
                <a
                  href="javascript:;"
                  @click="sendBrand(brand, preindex, index)"
                  >{{ brand }}</a
                >
              </li>
            </ul>
          </div>

          <a
            v-show="toggleCat"
            href="javascript:;"
            class="p-expand-btn"
            @click="toggleCat = !toggleCat"
            >更多<i class="el-icon-arrow-down"></i
          ></a>
          <a
            v-show="!toggleCat"
            href="javascript:;"
            class="p-expand-btn"
            @click="toggleCat = !toggleCat"
            >收起<i class="el-icon-arrow-up"></i
          ></a>
        </div>
      </div>

      <div class="pro-cate-attr clearfix">
        <div class="p-title">CPU：</div>
        <div class="p-values">
          <div class="p-expand" :class="{ p_single: cputoggleCat }">
            <ul class="clearfix">
              <li
                v-for="(cpu, index) in cpus"
                :key="index"
                :class="{ selected: isCpuselect[index] }"
              >
                <a
                  href="javascript:;"
                  @click="sendCpu(cpu, preCpuIndex, index)"
                  >{{ cpu == "" ? "不详" : cpu }}</a
                >
              </li>
            </ul>
          </div>

          <a
            v-show="cputoggleCat"
            href="javascript:;"
            class="p-expand-btn"
            @click="cputoggleCat = !cputoggleCat"
            >更多<i class="el-icon-arrow-down"></i
          ></a>
          <a
            v-show="!cputoggleCat"
            href="javascript:;"
            class="p-expand-btn"
            @click="cputoggleCat = !cputoggleCat"
            >收起<i class="el-icon-arrow-up"></i
          ></a>
        </div>
      </div>
      <div class="pro-cate-attr clearfix">
        <div class="p-title">系统</div>
        <div class="p-values">
          <div class="p-expand">
            <ul class="clearfix">
              <li
                :class="{ selected: isSystemselect[index] }"
                v-for="(system, index) in systems"
                :key="index"
              >
                <a
                  href="javascript:;"
                  @click="sendSystem(system, preSystemIndex, index)"
                  >{{ system }}</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="pro-cate-attr clearfix">
        <div class="p-title">后摄主摄像素：</div>
        <div class="p-values">
          <div class="p-expand" :class="{ p_single: ceamratoggleCat }">
            <ul class="clearfix">
              <li
                v-for="(ceamra, index) in cemeras"
                :key="index"
                :class="{ selected: isCameraselect[index] }"
              >
                <a
                  href="javascript:;"
                  @click="sendCeamra(ceamra, preCameraIndex, index)"
                  >{{ ceamra == " " ? "不详" : ceamra }}</a
                >
              </li>
            </ul>
          </div>

          <a
            v-show="ceamratoggleCat"
            href="javascript:;"
            class="p-expand-btn"
            @click="ceamratoggleCat = !ceamratoggleCat"
            >更多<i class="el-icon-arrow-down"></i
          ></a>
          <a
            v-show="!ceamratoggleCat"
            href="javascript:;"
            class="p-expand-btn"
            @click="ceamratoggleCat = !ceamratoggleCat"
            >收起<i class="el-icon-arrow-up"></i
          ></a>
        </div>
      </div>

      <div class="pro-cate-attr clearfix">
        <div class="p-title">屏幕尺寸：</div>
        <div class="p-values">
          <div class="p-expand">
            <ul class="clearfix ul">
              <li :class="{ selected: isScreenselect[0] }">
                <a
                  href="javascript:;"
                  @click="sendScreen([1.8, 6], preScreenIndex, 0)"
                  >1.8-6.0英寸</a
                >
              </li>

              <li :class="{ selected: isScreenselect[1] }">
                <a
                  href="javascript:;"
                  @click="sendScreen([6.1, 6.5], preScreenIndex, 1)"
                  >6.1-6.5英寸</a
                >
              </li>

              <li :class="{ selected: isScreenselect[2] }">
                <a
                  href="javascript:;"
                  @click="sendScreen([6.5, 6.8], preScreenIndex, 2)"
                  >6.5-6.8英寸</a
                >
              </li>
              <li :class="{ selected: isScreenselect[3] }">
                <a
                  href="javascript:;"
                  @click="sendScreen([6.8, 100], preScreenIndex, 3)"
                  >6.8英寸以上</a
                >
              </li>
              <li :class="{ selected: isScreenselect[4] }">
                <a
                  href="javascript:;"
                  @click="sendScreen([0], preScreenIndex, 4)"
                  >其他</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="pro-cate-attr clearfix">
        <div class="p-title">运行内存：</div>
        <div class="p-values">
          <div class="p-expand">
            <ul class="clearfix ul">
              <li
                :class="{ selected: isRamselect[index] }"
                v-for="(ram, index) in rams"
                :key="index"
              >
                <a
                  href="javascript:;"
                  @click="sendRam(ram, preRamIndex, index)"
                  >{{
                    ram == 1 ? "2GB以下" : ram == 0 ? "其他" : ram + "GB"
                  }}</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="pro-cate-attr clearfix">
        <div class="p-title">储存容量：</div>
        <div class="p-values">
          <div class="p-expand">
            <ul class="clearfix ul">
              <li
                :class="{ selected: isRomselect[index] }"
                v-for="(rom, index) in roms"
                :key="index"
              >
                <a
                  href="javascript:;"
                  @click="sendRom(rom, preRomIndex, index)"
                  >{{
                    rom == 7 ? "8GB以下" : rom == 0 ? "其他" : rom + "GB"
                  }}</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="pro-cate-sort clearfix">
        <div class="p-title">排序：</div>
        <div class="p-values">
          <div class="p-expand">
            <ul class="clearfix">
              <li :class="{ selected: isPaixuselect[0] }">
                <a
                  href="javascript:;"
                  @click="sendPaixu('zonghe', prePaixuIndex, 0, -1)"
                  >综合<s></s
                ></a>
              </li>
              <li :class="{ selected: isPaixuselect[1] }">
                <a
                  href="javascript:;"
                  @click="sendPaixu('ostime', prePaixuIndex, 1, -1)"
                  >最新<s></s
                ></a>
              </li>
              <li :class="{ selected: isPaixuselect[2] }">
                <a
                  href="javascript:;"
                  @click="sendPaixu('commentCounts', prePaixuIndex, 2, -1)"
                  >评论数<s></s
                ></a>
              </li>
              <li
                :class="{
                  selected: isPaixuselect[3],
                  'sort-desc': isadprice,
                  'sort-asc': !isadprice,
                }"
              >
                <a
                  href="javascript:;"
                  class="sort-price"
                  title="价格排序"
                  @click="sendPaixu('adprice', prePaixuIndex, 3, false)"
                  >价格<s></s
                ></a>
                <div class="pro-cate-range">
                  <div class="sort-range-price clearfix">
                    <div class="range-price firstInput">
                      <input
                        type="text"
                        maxlength="8"
                        v-model.number="price.gtprice"
                      />
                    </div>
                    <div class="range-price secondInput">
                      <input
                        type="text"
                        maxlength="8"
                        v-model.number="price.ltprice"
                      />
                    </div>
                  </div>
                  <div class="button-range-price" style="">
                    <span class="cancel" @click="clearPrice()">清空</span>
                    <span class="ok" @click="sendPrice()">确定</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "category",
  data() {
    return {
      searchKey: "",
      //绑定点击a标签的样式
      isselect: [],
      preindex: -1,
      isScreenselect: [false, false, false, false],
      preScreenIndex: -1,
      isRamselect: [],
      preRamIndex: -1,
      isRomselect: [],
      preRomIndex: -1,
      isOstimeselect: [],
      preOstimeIndex: -1,
      isCpuselect: [],
      preCpuIndex: -1,
      isCameraselect: [],
      preCameraIndex: -1,
      isSystemselect: [],
      preSystemIndex: -1,
      isPaixuselect: [],
      prePaixuIndex: -1,
      isadprice: 0,
      //点击更多的样式
      toggleCat: true,
      cputoggleCat: true,
      ceamratoggleCat: true,
      //品牌
      brands: [],
      //运行内存
      rams: [],
      roms: [],
      cpus: [],
      cemeras: [],
      systems: [],
      //价格排序
      price: { ltprice: "", gtprice: "" },
    };
  },
  methods: {
    focus() {
      this.searchKey = "";
    },
    searchDate() {
      this.isselect.forEach((e, index) => {
        this.$set(this.isselect, index, false);
      });
      this.preindex = -1;
      this.isCpuselect.forEach((e, index) => {
        this.$set(this.isCpuselect, index, false);
      });
      this.isSystemselect.forEach((e, index) => {
        this.$set(this.isSystemselect, index, false);
      });
      this.isCameraselect.forEach((e, index) => {
        this.$set(this.isCameraselect, index, false);
      });
      this.isScreenselect.forEach((e, index) => {
        this.$set(this.isScreenselect, index, false);
      });
      this.isRamselect.forEach((e, index) => {
        this.$set(this.isRamselect, index, false);
      });
      this.isRomselect.forEach((e, index) => {
        this.$set(this.isRomselect, index, false);
      });
      this.isPaixuselect.forEach((e, index) => {
        this.$set(this.isPaixuselect, index, false);
      });
      this.$store.commit("setCondition", {
        key: "skuname",
        value: this.searchKey,
      });
      this.price.ltprice = "";
      this.price.gtprice = "";
    },
    //从后端获取品牌种类
    getBrands() {
      this.axios
        .get("/phone/getBrands")
        .then((res) => {
          if (res.data.code == 200) {
            this.brands = res.data.brands;
            this.isselect = new Array(this.brands.length).fill(false);
            this.rams = res.data.ram;
            this.isRamselect = new Array(this.rams.length).fill(false);
            this.roms = res.data.rom;
            this.isRomselect = new Array(this.roms.length).fill(false);
            this.cpus = res.data.cpu;
            this.isCpuselect = new Array(this.cpus.length).fill(false);
            this.cemeras = res.data.rearcamera;
            this.isCameraselect = new Array(this.cemeras.length).fill(false);
            this.systems = res.data.system;
            this.isSystemselect = new Array(this.systems.length).fill(false);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sendBrand(bd, preindex, nowindex) {
      if (preindex == nowindex) {
        this.$set(this.isselect, nowindex, !this.isselect[preindex]);
        this.preindex = -1;
        this.searchKey = "";
        this.$store.commit("setCondition", { key: "brand", value: "" });
      } else {
        this.$set(this.isselect, preindex, !this.isselect[preindex]);
        this.$set(this.isselect, nowindex, !this.isselect[nowindex]);
        this.preindex = nowindex;
        this.searchKey = "";
        this.$store.commit("setCondition", { key: "brand", value: bd });
      }
    },
    sendScreen(sc, preScreenIndex, nowscindex) {
      if (preScreenIndex == nowscindex) {
        this.$set(
          this.isScreenselect,
          preScreenIndex,
          !this.isScreenselect[preScreenIndex]
        );
        this.preScreenIndex = -1;
        this.$store.commit("setCondition", { key: "screen", value: [] });
      } else {
        this.$set(
          this.isScreenselect,
          preScreenIndex,
          !this.isScreenselect[preScreenIndex]
        );
        this.$set(
          this.isScreenselect,
          nowscindex,
          !this.isScreenselect[nowscindex]
        );
        this.preScreenIndex = nowscindex;
        this.$store.commit("setCondition", { key: "screen", value: sc });
      }
    },
    sendRam(ra, preRamIndex, nowindex) {
      if (preRamIndex == nowindex) {
        this.$set(
          this.isRamselect,
          preRamIndex,
          !this.isRamselect[preRamIndex]
        );
        this.preRamIndex = -1;
        this.$store.commit("setCondition", { key: "ram", value: -1 });
      } else {
        this.$set(
          this.isRamselect,
          preRamIndex,
          !this.isRamselect[preRamIndex]
        );
        this.$set(this.isRamselect, nowindex, !this.isRamselect[nowindex]);
        this.preRamIndex = nowindex;
        this.$store.commit("setCondition", { key: "ram", value: ra });
      }
    },
    sendRom(ra, preRomIndex, nowindex) {
      if (preRomIndex == nowindex) {
        this.$set(
          this.isRomselect,
          preRomIndex,
          !this.isRomselect[preRomIndex]
        );
        this.preRomIndex = -1;

        this.$store.commit("setCondition", { key: "rom", value: -1 });
      } else {
        this.$set(
          this.isRomselect,
          preRomIndex,
          !this.isRomselect[preRomIndex]
        );
        this.$set(this.isRomselect, nowindex, !this.isRomselect[nowindex]);
        this.preRomIndex = nowindex;
        this.$store.commit("setCondition", { key: "rom", value: ra });
      }
    },
    sendCpu(ra, preCpuIndex, nowindex) {
      if (preCpuIndex == nowindex) {
        this.$set(
          this.isCpuselect,
          preCpuIndex,
          !this.isCpuselect[preCpuIndex]
        );
        this.preCpuIndex = -1;

        this.$store.commit("setCondition", { key: "cpu", value: "" });
      } else {
        this.$set(
          this.isCpuselect,
          preCpuIndex,
          !this.isCpuselect[preCpuIndex]
        );
        this.$set(this.isCpuselect, nowindex, !this.isCpuselect[nowindex]);
        this.preCpuIndex = nowindex;
        this.$store.commit("setCondition", { key: "cpu", value: ra });
      }
    },
    sendCeamra(ra, preCameraIndex, nowindex) {
      if (preCameraIndex == nowindex) {
        this.$set(
          this.isCameraselect,
          preCameraIndex,
          !this.isCameraselect[preCameraIndex]
        );
        this.preCameraIndex = -1;

        this.$store.commit("setCondition", { key: "ceamra", value: "" });
      } else {
        this.$set(
          this.isCameraselect,
          preCameraIndex,
          !this.isCameraselect[preCameraIndex]
        );
        this.$set(
          this.isCameraselect,
          nowindex,
          !this.isCameraselect[nowindex]
        );
        this.preCameraIndex = nowindex;
        this.$store.commit("setCondition", { key: "ceamra", value: ra });
      }
    },
    sendSystem(ra, preSystemIndex, nowindex) {
      if (preSystemIndex == nowindex) {
        this.$set(
          this.isSystemselect,
          preSystemIndex,
          !this.isSystemselect[preSystemIndex]
        );
        this.preSystemIndex = -1;

        this.$store.commit("setCondition", { key: "system", value: "" });
      } else {
        this.$set(
          this.isSystemselect,
          preSystemIndex,
          !this.isSystemselect[preSystemIndex]
        );
        this.$set(
          this.isSystemselect,
          nowindex,
          !this.isSystemselect[nowindex]
        );
        this.preSystemIndex = nowindex;
        this.$store.commit("setCondition", { key: "system", value: ra });
      }
    },
    sendPaixu(pa, prePaixuIndex, nowindex, val) {
      this.$set(this.isPaixuselect, prePaixuIndex, 0);
      this.$set(this.isPaixuselect, nowindex, 1);
      this.prePaixuIndex = nowindex;
      if (pa == "zonghe") {
        this.$store.commit("setCondition", { key: "ostime", value: 0 });
        this.$store.commit("setCondition", { key: "adprice", value: 0 });
        this.$store.commit("setCondition", { key: "commentCounts", value: 0 });
        this.isadprice = 0;
      } else if (pa == "ostime") {
        this.$store.commit("setCondition", { key: pa, value: val });
        this.$store.commit("setCondition", { key: "adprice", value: 0 });
        this.$store.commit("setCondition", { key: "commentCounts", value: 0 });
        this.isadprice = 0;
      } else if (pa == "commentCounts") {
        this.$store.commit("setCondition", { key: "adprice", value: 0 });
        this.$store.commit("setCondition", { key: "ostime", value: 0 });
        this.$store.commit("setCondition", { key: "commentCounts", value: -1 });
      } else {
        this.isadprice = !this.isadprice;
        this.$store.commit("setCondition", { ket: "ostime", value: 0 });
        this.$store.commit("setCondition", { key: "commentCounts", value: 0 });
        if (this.isadprice) {
          this.$store.commit("setCondition", { key: pa, value: -1 });
        } else {
          this.$store.commit("setCondition", { key: pa, value: 1 });
        }
      }
    },
    clearPrice() {
      this.price.ltprice = "";
      this.price.gtprice = "";
      this.$store.commit("setCondition", {
        key: "price",
        value: [],
      });
    },
    sendPrice() {
      if (this.price.ltprice < this.price.gtprice) {
        let pp = this.price.gtprice;
        this.price.gtprice = this.price.ltprice;
        this.price.ltprice = pp;
      }
      this.$store.commit("setCondition", {
        key: "price",
        value: [this.price.gtprice, this.price.ltprice],
      });
    },
  },
  mounted() {
    this.getBrands();
    let c = this.$store.getters.getConditions;
    console.log(c);
  },
};
</script>

<style scoped>
@import url("../../assets/fa/css/all.css");
@import url("../../assets/css/base.css");
@import url("../../assets/css/procategory.css");
</style>
